<template>
  <div class="container">
    <div class="handle-box">
      <span style="padding:8px;">标题：</span>
      <el-input v-model="query.title"
                placeholder="标题："
                class="handle-input mr10"></el-input>
      <!-- <span style="padding:8px;">所属分类：</span> -->
      <!-- <el-select v-model="query.cate" placeholder="请选择">
          <el-option
            v-for="item in zzTypeist"
            :key="item.id"
            :label="item.title"
            :value="item.id">
          </el-option>
      </el-select> -->
      <span style="padding:8px;"></span>
      <el-button type="success"
                 icon="el-icon-search"
                 size="medium"
                 @click="handleSearch">搜索</el-button>
      <!-- <el-button type="warning"
                 size="medium"
                 icon="el-icon-refresh-left"
                 @click="resultClick()">重置</el-button> -->
       <!-- 导出 -->
                    <!-- <downExcel
                        :fetch-data="excelExport"
                        :json-fields="jsonFields"
                        :fill-name="fillName"
                    ></downExcel> -->

    </div>
    <div style="padding:10px;">
          <el-button
              type="primary"
              icon="el-icon-document-add"
              size="medium"
              @click="createMethod" v-if="this.hosid"
          >新建</el-button>
          <span style="padding:8px;"></span>
          <!-- <el-button
              type="danger"
              icon="el-icon-delete"
              size="medium"
              @click="delAllSelection"
          >批量删除</el-button> -->
      </div>
    <el-table :data="tableData"
              border
              ref="multipleTable"
              header-cell-class-name="table-header"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection"
                       width="55"
                       align="center"></el-table-column>
      <!-- <el-table-column label="序号"
                       align="center"
                       width="100"
                       fixed>
        <template slot-scope="scope">{{scope.$index+(query.pageIndex - 1) * query.pageSize + 1}}</template>
      </el-table-column> -->
       <el-table-column label="ID"
                       align="center">
        <template slot-scope="scope">{{scope.row.id}}</template>
      </el-table-column>

      <el-table-column label="名称"
                       align="center">
        <template slot-scope="scope">{{scope.row.name}}</template>
      </el-table-column>
      <el-table-column label="价格"
                       align="center">
        <template slot-scope="scope">{{scope.row.price}}</template>
      </el-table-column>
      <el-table-column label="医院"
                       align="center">
        <template slot-scope="scope">{{scope.row.hosname}}</template>
      </el-table-column>
      
      <!-- <el-table-column label="价格"
                       align="center">
        <template slot-scope="scope">{{scope.row.price}}</template>
      </el-table-column> -->
      
      <el-table-column label="上架状态"
                       align="center">
        <template slot-scope="scope">{{scope.row.statustext}}</template>
      </el-table-column>
    

      <el-table-column label="所属分类"
                       align="center">
        <template slot-scope="scope">{{scope.row.cate_name}}</template>
      </el-table-column>
      <!-- <el-table-column label="活动状态" align="center">
          <template slot-scope="scope">
              <span v-if="scope.row.status==0">启用</span>
              <span v-if="scope.row.status==1">禁用</span>
          </template>
      </el-table-column> -->
      <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">{{scope.row.create_time | formDate}}</template>
      </el-table-column>
      <el-table-column label="操作"
                       width="200"
                       align="center">
        <template slot-scope="scope">
          <el-button @click="createBus(scope.row)"
                     type="text"
                     size="small"
                     icon="el-icon-edit">编辑</el-button>
 
      <el-button @click="showtjitem(scope.row)" type="text" size="small" >查看套餐项目</el-button>
       <el-button @click="handlecopytjitem(scope.row)" type="text" size="small" >一键生成项目</el-button>

      
       <!-- <el-button @click="backTomycustomer(scope.row)" type="text" size="small" >添加检查项目</el-button> -->
          <!-- <el-button @click="showprocess(scope.row)" type="text" size="small" >查看进度</el-button>
        <el-button @click="showperson(scope.row)" type="text" size="small" >查看诉讼</el-button> -->
        

          <el-button @click="handleDelete(scope.row)"
                     type="text"
                     size="small"
                     icon="el-icon-delete"
                     class="red">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination background
                     layout="total, prev, pager, next, jumper"
                     :current-page="query.pageIndex"
                     :page-size="query.pageSize"
                     :total="pageTotal"
                     @current-change="handlePageChange"></el-pagination>
    </div>

       <!-- 录入进度 -->
        <el-dialog
            :title="ruleFormzhcustomer.id ? '编辑' : '新增'"
            :visible.sync="dialogVisiblezhCustom"
            width="50%"
            :close-on-click-modal="false"
            top="2%"
            :before-close="(e) => handleClose(e, 'ruleFormzhcustomer')"
        >
            <el-form :model="ruleFormzhcustomer" ref="ruleFormzhcustomer" :rules="ruleForms" v-loading="loading" status-icon label-width="130px">
                <el-form-item label="名称" prop="name">
                    <el-input v-model.trim="ruleFormzhcustomer.name" placeholder="请输入内容" style="width: 80%"  autofocus></el-input>
                </el-form-item>
                 <el-form-item label="长标题" prop="longname">
                    <el-input v-model.trim="ruleFormzhcustomer.longname" placeholder="请输入内容" style="width: 80%"  ></el-input>
                </el-form-item>
                 <el-form-item label="价格" prop="title">
                    <el-input v-model.trim="ruleFormzhcustomer.price" placeholder="请输入内容" style="width: 80%"  ></el-input>
                </el-form-item>
                <el-form-item label="材料1" prop="cover">
                   
                      <file-upload :file-url.sync="ruleFormzhcustomer.cover" :uplaod-path="wordUpLoad"></file-upload>
                    <!-- <p style="padding: 6px; font-size: 12px; color: red">(图片高宽比16:9,格式为png透明图)</p> -->
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio-group v-model="ruleFormzhcustomer.status">
                        <el-radio :label="0">启用</el-radio>
                        <el-radio :label="1">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
                 
                 
                <!-- <el-form-item label="用户" prop="name">
                    <el-input v-model.trim="ruleFormzhcustomer.name" placeholder="请输入内容" style="width: 80%"></el-input>
                </el-form-item>
                   <el-form-item label="手机" prop="mobile">
                    <el-input v-model.trim="ruleFormzhcustomer.mobile" placeholder="请输入内容" style="width: 80%"  ></el-input>
                </el-form-item> -->

                  <!-- <el-form-item label="备注" prop="mark">
                    <el-input v-model.trim="ruleFormzhcustomer.mark" placeholder="请输入内容" style="width: 80%"  ></el-input>
                </el-form-item> -->
                 <!-- <el-form-item label="描述" prop="content">
                   <el-input v-model="ruleForm.content" :rows="6" type="textarea" placeholder="请输入"></el-input>
                </el-form-item>
               -->

                <!-- <div class="list-group">
              <el-row :gutter="20">
                <el-col :span="3">
                  <div>选择用户:</div>
                </el-col>
                <el-col :span="21">
                  <el-checkbox-group v-model="roleListVal">
                    <el-checkbox :label="val.id"
                                 @change="jsMethod()"
                                 :checked="val.active"
                                 v-for="(val,key) in roleList"
                                 :key="key">{{val.name}}</el-checkbox>
                  </el-checkbox-group>
                </el-col>
              </el-row>
            </div> -->


            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisiblezhCustom = false">取 消</el-button>
                <el-button type="primary" @click="onSubmitbackTomycustomer()">确 定</el-button>
            </span>
        </el-dialog>
    
 
  </div>
</template>

<script>
import api from '@/api/index';
import {getdate} from '@/utils/utils'
import imgUpload from '@/components/views/commons/ImgUpload';
import fileUpload from '@/components/views/commons/fileUpload';
import downExcel from '@/components/views/commons/ExcelModel';
export default {
  name: "financeList",
   components:{imgUpload,fileUpload,downExcel},
  data () {
    return {
      // docLoadPath: api.IMG_PATH,
      docLoadPath: api.API_PATH+"/",
      wordUpLoad: api.uploadFileall,
      hosname: '',
      hosid: '',
     serverid: '',
      exhibition_id: '',
      loading: false,
      dialogVisible: false,
      prolistarr:[],
      dialogVisiblezhCustom: false,
      query: {
        pageIndex: 1,
        pageSize: 10,
        title: '',
        cate: [],
        hosid:''
      },
      zzTypeist: [],
      pageTotal: 0,
      tableData: [],
      fId:'',
      f_text:'',
      fTextModel:false,
        ruleForms: {
                // title: [{ required: true, message: '请填写公告名称', trigger: 'blur' }],
                // url: [{ required: true, message: '图片地址', trigger: 'blur' }],
                // content: [{ required: false, message: '请填写内容', trigger: 'blur' }]
            },
         ruleFormzhcustomer: {
                title: '',
                caseno: '',
                status:0,
                name: '',
                mobile: '',
                sort:0,
                fileurl:'',
                  mark: '',
               role_ids: '',
            },

      idList: [], //选择的id数组
      multipleSelection: [],
      jsonFields: {},
     fillName: '',
      roleList: [],
     roleListVal: [],
     userclatListVal: [],
    }
  }, 
  filters:{
    toFixedFile:function(val){
      if(!val)return '0.00';
      return Number(val).toFixed(2)
    },
    formDate: (val) => {
        if (!val) return '';
        return getdate(val);
    }
  },
  mounted () {
    this.serverid = this.$route.query.serverid;
    this.hosname = this.$route.query.hosname; 
    this.hosid = this.$route.query.hosid; 
    this.initAjaxMethod()
    // this.ohterAjaxMethd()
    // this.roleAjaxMethod();
  },

  methods: {
    //打回
    refuseMethod(data){
      this.f_text='';
      this.fTextModel=true;
      this.fId=data.id;
    },
    saveEdit(){
      if(!this.f_text && this.f_text == ''){
        this.$message.error('请填写合同打回原因');
        return false;
      }else{
        this.refuseAjax()
      }
    },
    //合同打回ajax
    ohterAjaxMethd(){
      this.$http.post(api.SERVER_CATE_LIST)
          .then((res) => {
            console.log('项目列表', res)
            if (res.code == 1) {
              this.zzTypeist=Array.isArray(res.data)?res.data:[]
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch((err) => {
            this.$message.error(err.msg);
          })
    },
    //删除
    handleDelete(data){
      this.delAjaxMethod(data.id);
    },
    //编辑
    createBus(row){
      this.$router.push({ path: '/goodsAdd', query: {id:row.id, type: 2}})
    },
    resultClick () {
      this.query.title = '';
      this.query.store = '';
      this.query.pageIndex=1;
      this.initAjaxMethod()
    },
    createMethod () {
      
      this.$router.push({ path: '/goodsAdd', query: { type: 1,hosid:this.hosid,serverid:this.serverid } })
    },
    // 多选操作
    handleSelectionChange (val) {
      this.multipleSelection = val;

      var emptyIdList = [];
      for (var i = 0; i < val.length; i++) {
        emptyIdList.push(val[i].id);
      }
      this.idList = emptyIdList;
      console.log(this.idList);


    },
    delAllSelection () {
      let arr = [];
      if (this.multipleSelection.length <= 0) {
          this.$message({
              type: 'error',
              message: '请选择一个'
          });
          return false;
      } else {
          this.multipleSelection.forEach(item => {
              arr.push(item.id);
          });
          this.delAjaxMethod(arr.join(','));
      }
    },
    delAjaxMethod(ids){
      this.$confirm('此操作将删除此条信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({ text: '加载中...' });
        this.$http.post(api.GOODS_DEL, {ids:ids})
              .then((res) => {
                loading.close();
                console.log('项目列表', res)
                if (res.code == 1) {
                  this.$message.success('删除成功');
                  this.query.pageIndex=1;
                  this.initAjaxMethod()
                } else {
                  this.$message.error(res.msg);
                }
              })
              .catch((err) => {
                this.$message.error(err.msg);
              })
      })
    },

    // 一键复制项目，方便后面勾选
    handlecopytjitem(data1){
      this.$confirm('此操作将生成系统模板, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({ text: '加载中...' });
        this.$http.post(api.GOODS_copytjitem, {goodsid:data1.id,hosid:data1.hosId})
              .then((res) => {
                loading.close();
                console.log('项目列表', res)
                if (res.code == 1) {
                  this.$message.success('成功');
                  this.query.pageIndex=1;
                  this.initAjaxMethod()
                } else {
                  this.$message.error(res.msg);
                }
              })
              .catch((err) => {
                this.$message.error(err.msg);
              })
      })
    },

  handleDeletepro(data2){
      let ids=data2.id;
      this.$confirm('此操作将删除此条信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({ text: '加载中...' });
        this.$http.post(api.SERVER_PRODEL, {ids:ids})
              .then((res) => {
                loading.close();
                console.log('项目列表', res)
                if (res.code == 1) {
                  this.dialogVisible=false;
                  this.$message.success('删除成功');
                  this.query.pageIndex=1;
                  this.initAjaxMethod()
                } else {
                  this.$message.error(res.msg);
                }
              })
              .catch((err) => {
                this.$message.error(err.msg);
              })
      })
    },
 
      // 转化客户
        backTomycustomer(row) {
          
            const ruleFormzhcustomer = {
                title: row.name,
                caseno: row.caseno,
                name: '',
                status: 0,
                mobile: row.mobile,   
                 mark: row.mark,               
                id:row.id,
                role_ids:'',
            };

            //   row.roleList.forEach(item => {
            //   item.active = false;
            // });
            // let roleList = res.data.roleList.filter(item => item.status == 1);
            // this.roleList = roleList;
             row.personslist.forEach(item => {
              item.active = false;
            });
      
            let roleList = row.personslist.filter(item => item.status == 1);
                  console.log(roleList);
            this.roleList = roleList;
            


            this.ruleFormzhcustomer = ruleFormzhcustomer;
            this.dialogVisiblezhCustom = true;
        },
    // 分页导航
    handlePageChange (val) {
      this.$set(this.query, 'pageIndex', val);
      this.initAjaxMethod();
    },
    handleSearch () {
      this.$set(this.query, 'pageIndex', 1);
      this.initAjaxMethod()
    },
    initAjaxMethod () {
      let data = {
        page: this.query.pageIndex,//[string]	是	当前页
        pageSize: this.query.pageSize,//[string]	是	每页条数
        title: this.query.title,//[string]	是	付款名称
        hosid: this.hosid,
        cate: Array.isArray(this.query.cate) && this.query.cate.length>0?this.query.cate[this.query.cate.length-1]:''
      };
      this.$http.post(api.GOODS_INDEX, data)
        .then((res) => {
          console.log('财务', res)
          if (res.code == 1) {
            this.tableData = Array.isArray(res.data.list)?res.data.list:[];
            this.pageTotal = res.data.count;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        })
    },
      //弹框关闭按钮
     handleClose(done, name) {
        if (this.$refs['name']) {
                this.$refs['name'].resetFields();
            }
            done();
      },

    //进度提交 
     onSubmitbackTomycustomer() {
 
           if(this.ruleFormzhcustomer.role_ids==""  ){
              this.$message.error('请选择用户');return false;
           } 
           if(this.ruleFormzhcustomer.sort==""){
              this.$message.error('请填写序号');return false;
           } 

           if(this.ruleFormzhcustomer.name==""){
              this.$message.error('请填写标题');return false;
           } 


           
            this.$refs.ruleFormzhcustomer.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    // const url = this.ruleFormzhcustomer.id ? api.DECORATIONcustom_EDIT : api.DECORATIONcustom_ADD;
                    const url = api.SERVER_PROADD; 
                    this.ruleFormzhcustomer.serverid=this.ruleFormzhcustomer.id;
                    this.$http.post(url, this.ruleFormzhcustomer)
                        .then((res) => {
                            if (res.code == 1) {
                                this.$message.success('操作成功');
                                this.initAjaxMethod();
                                this.dialogVisiblezhCustom = false;
                            } else {
                                this.$message.error(res.msg);
                            }
                            this.loading = false;
                        })
                        .catch(() => {
                            this.loading = false;
                        });
                } else {
                    return this.$message.error('有必填项目未填写');
                }
            });
        },

       //编辑
        prolist(row) {
            // this.$router.push({ path: '/articleAdd', query: {id:row.id, type: 2}})
            this.prolistarr=row.prolist;
            this.dialogVisible=true;
        },
        // 查看诉讼
         showperson(row) {
            this.$router.push({ path: '/decoration', query: {serverid:row.id, type: 2}})
           
        },

        // 查看进度
        showtjitem(row) {
            this.$router.push({ path: '/tcitem', query: {serverid:row.id, type: 2,hosname:row.hosname,hosid:row.hosId}})
           
        },

       jsMethod () {
          this.ruleFormzhcustomer.role_ids = this.roleListVal.join(',');
          // userclatListVal
        },
   roleAjaxMethod () {
      const loading = this.$loading({ text: '加载中...' });
      this.$http
        .post(api.ROLE_INDEX, {})
        .then(res => {
          loading.close();
          console.log('角色列表', res);
          if (res.code == 1) {
            res.data.roleList.forEach(item => {
              item.active = false;
            });
            let roleList = res.data.roleList.filter(item => item.status == 1);
            this.roleList = roleList;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },

         async excelExport() {
            const loading = this.$loading({ text: '加载中...' });
            let arr = [];
            //  this.idList
            this.idList.forEach(item => {
                arr.push(item);
            });

 

            // console.log("sdfsfd",arr);return;
            // org_id: this.searchOrgId, keyword: this.searchName, page: this.currentPage,roleId:this.roleId
            const response = await this.$http.post(api.serveexport_LIST, {
                 page: this.query.pageIndex,//[string]	是	当前页
                pageSize: this.query.pageSize,//[string]	是	每页条数
                hoscode: this.query.hoscode,
                keyword: this.searchName,
                ids: arr.length > 0 ? arr.join(',') : '',
                roleId:this.roleId
            });
            loading.close();
            console.log('response', response);
            if (response.code == 1) {
                response.data.columns.forEach(item => {
                    this.jsonFields[item.title] = item.field;
                });
                this.fillName = response.data.filename ? response.data.filename : '胸卡明细表';
                console.log('this.jsonFields', this.jsonFields);
                console.log('response.data.list', response.data.list);
                return response.data.list;
            }
        },

  }
}
</script>

<style scoped>
.handle-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
}
.el-input--small {
    display: initial;
}
.handle-input {
    width: auto;
    display: inline-block;
}
.mr10 {
    margin-right: 10px;
}
.red {
  color: #f56c6c;
}
  .green{
    color:#67C23A;
  }
</style>